{extend name="/public/base"}
{block name="title"}{/block}
{block name="css"}{/block}
{block name="main"}
{:widget('Pub/header')}
<!--<div class="swiper-container banner">-->
<!--    <div class="swiper-wrapper">-->
<!--        <div class="swiper-slide">-->
<!--            <a href="###" target="_blank" title="首页BANNER2">-->
<!--                -->
<!--            </a>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="swiper-pagination"></div>-->
<!--    <div class="swiper-button-next banner-next swiper-button-white"></div>-->
<!--    <div class="swiper-button-prev banner-prev swiper-button-white"></div>-->
<!--</div>-->
<div class="banner" style="width: 100%;height: 419px;overflow: hidden;">
    <img src="{$banner}" style="width: 100%;height: auto;">
</div>
<div class="main">
    <!-- 列表 -->
    <div class="product">
        <ul>
            {volist name="list" id="vo"}
            <li>
                <div class="con">
                    <div class="img">
                        <img src="{$vo.bckimg}">
                    </div>
                    <div class="flex-between">
                        <div class="pro-vertical"></div>
                        <div class="pro-title">{$vo.title}</div>
                        <div class="pro-plus" onclick="shouList(this)">+</div>
                    </div>
                    {if ($vo.child != [])}
                    <div class="pro-list">
                        <ul>
                            {volist name="$vo.child" id="vo2"}
                            <li><a href="{$vo2.url}">{$vo2.title}</a></li>
                            {/volist}
                        </ul>
                    </div>
                    {/if}
                </div>
            </li>
            {/volist}
        </ul>
    </div>
</div>
{:widget('Pub/footer')}
{/block}
{block name="js"}
<script>
    var swiper = new Swiper('.banner', {
// effect : 'fade',
        loop: true,
        speed: 1500,
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.banner-next',
            prevEl: '.banner-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    })
    function shouList(element){
        let currentVal = $(element).text();
        let listDom = $(element).parent().next();
        if(currentVal == '+'){
            $(element).text('-');
            listDom.show(200,"linear");
        }else {
            $(element).text('+');
            listDom.hide(200,"linear");
        }
    }
</script>
{/block}